<template>
  <GcTable
    ref="instanceTable"
    v-loading="loading"
    :columns="TOOL_CLASSIFY_COLUMN"
    :tableData="tableData"
    :showPage="false"
    :showFilter="false"
    :showSearch="false"
    @selection-change="handlerSelectionChange">
    <template #btn-group>
      <el-button type="primary"
        v-permission="'tool-classify-permission:btn:add'"
        @click="currentToolClassify = null; classifyModalVisible = true">新增工具分类</el-button>
      <el-button
        v-permission="'tool-classify-permission:btn:delete'"
        @click="deleteToolClassify(selectionIds)"
        :disabled="!selectionIds.length"
        type="danger">批量删除</el-button>
    </template>
    <template #icon="{ row }">
      <i :class="[row.icon]" style="font-size: 18px;"></i>
    </template>
    <template #operate="{ row }">
      <div class="operate-btn-group center">
        <gc-icon-button
          type="link"
          v-permission="'tool-classify-permission:btn:edit'"
          @click="updateToolClassify(row)">编辑</gc-icon-button>
        <gc-icon-button
          type="link"
          v-permission="'tool-classify-permission:btn:delete'"
          @click="deleteToolClassify([row.id])">删除</gc-icon-button>
      </div>
    </template>
  </GcTable>
  <OperateClassifyModal
    v-if="classifyModalVisible"
    @close-modal="closeModal"
    :classifyInfo="currentToolClassify" />
</template>

<script setup lang="ts" name="ToolClassifyClassify">
import { ref } from 'vue'
import { TOOL_CLASSIFY_COLUMN } from './const'
import usePagination from '@/hooks/usePagination'
import type { ToolClassify } from '@/http/type'
import { apiGetToolClassifyList, apiDeleteToolClassifys } from '@/http/service'
import { ElMessageBox, ElMessage } from 'element-plus'
import OperateClassifyModal from './components/OperateClassifyModal.vue'

const instanceTable = ref()
const { loading } = usePagination()
const tableData = ref<Array<ToolClassify>>([])
const currentToolClassify = ref<null | ToolClassify>(null)
const classifyModalVisible = ref(false)
const selectionIds = ref<Array<number>>([])

/**
 * 工具分类列表树查询
 */
async function findToolClassifyList () {
  loading.value = true
  try {
    const data = await apiGetToolClassifyList<Array<ToolClassify>>()
    tableData.value = data
  } catch (error) {
    tableData.value = []
  } finally {
    loading.value = false
  }
}
findToolClassifyList()

/**
 * 工具分类批量删除
 * @param ids
 */
async function deleteToolClassify (ids: Array<number>) {
  await ElMessageBox.confirm(
    '删除工具分类后将无法恢复？',
    '提示',
    {
      type: 'warning'
    }
  )
  await apiDeleteToolClassifys({ ids })
  ElMessage.success('删除工具分类成功')
  findToolClassifyList()
}

function updateToolClassify (toolclassifyItem: ToolClassify) {
  currentToolClassify.value = toolclassifyItem
  classifyModalVisible.value = true
}

function handlerSelectionChange (selections: Array<ToolClassify>) {
  selectionIds.value = selections.map(o => o.id)
}

function closeModal (update?: boolean) {
  if (update) {
    findToolClassifyList()
  }
  classifyModalVisible.value = false
}
</script>

<style lang="scss" scoped></style>
